<template>
  <div>
    {{id}}

    <!------------------     聊天页面     ---------------->
    <div style="padding: 10px; margin-bottom: 50px">
      <el-row>
        <el-col :span="16">
          <div style="width: 800px; margin: 0 auto; background-color: white;
                    border-radius: 5px; box-shadow: 0 0 10px #ccc">
            <div style="text-align: center; line-height: 50px;">
              <span style="font-size: 30px">{{ patient.recordName }}&nbsp;</span>{{patient.recordSex}}&nbsp;{{patient.recordAge}}
            </div>
            <div style="height: 350px; overflow:auto; border-top: 1px solid #ccc" v-html="content"></div>
            <div style="height: 200px">
            <textarea v-model="text" style="height: 160px; width: 100%; padding: 20px; border: none; border-top: 1px solid #ccc;
             border-bottom: 1px solid #ccc; outline: none"></textarea>
              <div style="text-align: right; padding-right: 10px">
                <el-button type="primary" size="mini" @click="send">发送</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
<!--    <div style="padding: 10px; margin-bottom: 50px">-->
<!--      <el-row>-->
<!--        <el-col :span="8">-->
<!--          <el-card style="width: 100%; min-height: 300px; color: #333">-->
<!--            <div style="padding-bottom: 10px; border-bottom: 1px solid #ccc">在线用户<span style="font-size: 12px">（点击聊天气泡开始聊天）</span></div>-->
<!--            <div style="padding: 10px 0" v-for="user in users" :key="user.username">-->
<!--              <span @click="chatUser = user.username">{{ user.username }}</span>-->
<!--&lt;!&ndash;              <i class="el-icon-chat-dot-round" style="margin-left: 10px; font-size: 16px; cursor: pointer"&ndash;&gt;-->
<!--&lt;!&ndash;                 @click="chatUser = user.username"></i>&ndash;&gt;-->
<!--              <span style="font-size: 12px;color: limegreen; margin-left: 5px" v-if="user.username === chatUser">chatting...</span>-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--        <el-col :span="16">-->
<!--          <div style="width: 800px; margin: 0 auto; background-color: white;-->
<!--                    border-radius: 5px; box-shadow: 0 0 10px #ccc">-->
<!--            <div style="text-align: center; line-height: 50px;">-->
<!--              Web聊天室（{{ chatUser }}）-->
<!--            </div>-->
<!--            <div style="height: 350px; overflow:auto; border-top: 1px solid #ccc" v-html="content"></div>-->
<!--            <div style="height: 200px">-->
<!--            <textarea v-model="text" style="height: 160px; width: 100%; padding: 20px; border: none; border-top: 1px solid #ccc;-->
<!--             border-bottom: 1px solid #ccc; outline: none"></textarea>-->
<!--              <div style="text-align: right; padding-right: 10px">-->
<!--                <el-button type="primary" size="mini" @click="send">发送</el-button>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->


<!--    <div>-->
<!--      <el-input type="textarea" v-model="text_content" :rows="9" /> 返回内容-->
<!--      <br />-->
<!--      <br />-->
<!--      <el-input v-model="url" type="text" style="width: 20%" /> &nbsp; &nbsp;-->
<!--      <el-button @click="join" type="primary">连接</el-button>-->
<!--      <el-button @click="exit" type="danger">断开</el-button>-->

<!--      <br />-->
<!--      <el-input type="textarea" v-model="message" :rows="9" />-->
<!--      <el-button type="info" @click="send">发送消息</el-button>-->
<!--      <br />-->
<!--      <br />-->

<!--    </div>-->
    <div class="custom-div">
      <!-- 搜索框部分 -->
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="药品名称" prop="drugName">
          <el-input
              v-model="queryParams.drugName"
              placeholder="请输入药品名称"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 列表部分 -->
      <el-table v-loading="loading" :data="drugList" v-show="showList">
        <!-- el-table-column 配置 -->
        <el-table-column label="药品名称" align="center" prop="drugName"/>
        <el-table-column label="药品介绍" align="center" prop="drugDetails"/>
        <el-table-column label="药品价格" align="center" prop="drugPrice"/>
        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="添加" placement="top">
              <el-button link type="primary"  @click="handleAdd(scope.row)">添加</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <br>
      <!-- 已选药品列表部分 -->
      <el-table v-if="drugs.length > 0" :data="drugs" >
        <el-table-column label="已选药品id" prop="drugName" align="center">
          <template #default="scope">
            <span>{{scope.row.drugId}}</span>
          </template>
        </el-table-column>
        <el-table-column label="已选药品名称" prop="drugName" align="center">
          <template #default="scope">
            <span>{{scope.row.drugName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="药品数量" align="center">
          <template #default="scope">
            <el-input-number
                v-model="scope.row.drugsNumber"
                @change="handleCountChange(scope.row)"
                :min="1"
                :max="100"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 文本框部分 -->
      <textarea placeholder="请输入诊断结果" v-model="prescription"></textarea>

      <!-- 按钮部分 -->
      <button @click="produce">生成诊断报告</button>
    </div>

  </div>
</template>

<script setup name="Patients">
// 聊天4.0
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import useUserStore from '@/store/modules/user'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const form = ref({})
const patient = ref({})
const prescriptionForm = ref({
  prescription: {
    'diagnosticResult': undefined,
    'patientId': undefined,
    'diagnosticDiseaseDescription': undefined
  },
  prescriptionDrugMiddleList: []
})

// 消息集
const messages = ref([])
// 当前发送人
const myId = ref()
// 消息
const text = ref()
// 消息集html
const content = ref([])
let socket
function getRecordByPatientId() {
  prescriptionForm.value.prescription.patientId = route.query.patientId
  // findThisRecordByPatientId(route.query.patientId).then(res => {
  //   patient.value = res.data
  // })
}


/** 发送消息 */

function send() {
  if (!prescriptionForm.value.prescription.patientId) {
    ElMessage({type: 'warning', message: "请选择聊天对象"})
    return;
  }
  if (!text.value) {
    ElMessage({type: 'warning', message: "请输入内容"})
  } else {
    if (typeof (WebSocket) == "undefined") {
      console.log("您的浏览器不支持WebSocket");
    } else {
      console.log("您的浏览器支持WebSocket");
      // 组装待发送的消息 json
      // {"from": "zhang", "to": "admin", "text": "聊天文本"}
      let message = {from: myId.value, to: prescriptionForm.value.prescription.patientId, text: text.value}
      socket.send(JSON.stringify(message));  // 将组装好的json发送给服务端，由服务端进行转发
      messages.value.push({user: myId.value, text: text.value})
      // 构建消息内容，本人消息
      createContent(null, myId.value, text.value)
      text.value = '';
    }
  }
}

/** 构建聊天气泡 */
function createContent(remoteUser, nowUser, text) {  // 这个方法是用来将 json的聊天消息数据转换成 html的。
  let html
  // 当前用户消息
  if (nowUser) { // nowUser 表示是否显示当前用户发送的聊天消息，绿色气泡
    html = "<div class=\"el-row\" style=\"padding: 5px 0\">\n" +
        "  <div class=\"el-col el-col-22\" style=\"text-align: right; padding-right: 10px\">\n" +
        "    <div class=\"tip left\">" + text  + "    </div>\n" +
        "  </div>\n" +
        "  <div class=\"el-col el-col-2\">\n" +
        "  <span class=\"el-avatar el-avatar--circle\" style=\"height: 40px; width: 40px; line-height: 40px;\">\n" +
        "    <img src=\"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png\" style=\"object-fit: cover;\">\n" +
        "  </span>\n" +
        "  </div>\n" +
        "</div>";
  } else if (remoteUser) {   // remoteUser表示远程用户聊天消息，蓝色的气泡
    html = "<div class=\"el-row\" style=\"padding: 5px 0\">\n" +
        "  <div class=\"el-col el-col-2\" style=\"text-align: right\">\n" +
        "  <span class=\"el-avatar el-avatar--circle\" style=\"height: 40px; width: 40px; line-height: 40px;\">\n" +
        "    <img src=\"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png\" style=\"object-fit: cover;\">\n" +
        "  </span>\n" +
        "  </div>\n" +
        "  <div class=\"el-col el-col-22\" style=\"text-align: left; padding-left: 10px\">\n" +
        "    <div class=\"tip right\">" + text + "</div>\n" +
        "  </div>\n" +
        "</div>";
  }
  console.log(html)
  content.value += html;
}

/** 初始化长连接 */
function init() {
  let username = myId.value;
  if (typeof (WebSocket) == "undefined") {
    console.log("您的浏览器不支持WebSocket");
  } else {
    console.log("您的浏览器支持WebSocket");
    let socketUrl = "ws://localhost:9211/imserver/" + username;
    if (socket != null) {
      socket.close();
      socket = null;
    }
    // 开启一个websocket服务
    socket = new WebSocket(socketUrl);
    //打开事件
    socket.onopen = function () {
      console.log("websocket已打开");
    };
    //  浏览器端收消息，获得从服务端发送过来的文本消息
    socket.onmessage = function (msg) {
      console.log("收到数据====" + msg.data)
      let data1 = JSON.parse(msg.data)  // 对收到的json数据进行解析， 类似这样的： {"users": [{"username": "zhang"},{ "username": "admin"}]}
      // if (data.users) {  // 获取在线人员信息
      //   _this.users = data.users.filter(user => user.userId !== username)  // 获取当前连接的所有用户信息，并且排除自身，自己不会出现在自己的聊天列表里
      // } else {
      // 如果服务器端发送过来的json数据 不包含 users 这个key，那么发送过来的就是聊天文本json数据
      //  // {"from": "zhang", "text": "hello"}
      if (data1.from === prescriptionForm.value.prescription.patientId) {
        messages.value.push(data1)
        // 构建消息内容
        createContent(data1.from, null, data1.text)
      }
      // }
    };
    //关闭事件
    socket.onclose = function () {
      console.log("websocket已关闭");
    };
    //发生了错误事件
    socket.onerror = function () {
      console.log("websocket发生了错误");
    }
  }
}

myId.value = userStore.$state.id
getRecordByPatientId()
// findCharHistory()
init()


// 聊天框3.0
// 使用 ref() 函数来创建响应式数据
//
// import { ref, reactive } from 'vue';
// const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png');
//
// let socket;
//
// const user = ref({});
// const isCollapse = ref(false);
// const users = ref([]);
// const chatUser = ref('');
// const text = ref('');
// const content = ref('');
// const messages = ref([]);
// const userId = window.sessionStorage.getItem('userz');
// // 发送消息的方法
// // send方法
// const send = () => {
//   if (!chatUser.value) {
//     console.log('请选择聊天对象');
//     return;
//   }
//   if (!text.value) {
//     console.log('请输入内容');
//     return;
//   }
//
//   if (typeof WebSocket === 'undefined') {
//     console.log('您的浏览器不支持WebSocket');
//   } else {
//     console.log('您的浏览器支持WebSocket');
//     const message = { from: user.value.username, to: chatUser.value, text: text.value };
//     debugger
//     if (socket !== null && socket.readyState === WebSocket.OPEN) {
//       socket.send(JSON.stringify(message));
//       messages.value.push({ user: user.value.username, text: text.value });
//       createContent(null, user.value.username, text.value);
//       text.value = '';
//     } else {
//       console.log('WebSocket连接未打开或已关闭');
//     }
//   }
// };
//
// // createContent方法
// function createContent(remoteUser, nowUser, text) {
//   let html;
//   if (nowUser) {
//     html = `
//       <div class="el-row" style="padding: 5px 0">
//         <div class="el-col el-col-22" style="text-align: right; padding-right: 10px">
//           <div class="tip left">${text}</div>
//         </div>
//         <div class="el-col el-col-2">
//           <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;">
//             <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;">
//           </span>
//         </div>
//       </div>`;
//   } else if (remoteUser) {
//     html = `
//       <div class="el-row" style="padding: 5px 0">
//         <div class="el-col el-col-2" style="text-align: right">
//           <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;">
//             <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;">
//           </span>
//         </div>
//         <div class="el-col el-col-22" style="text-align: left; padding-left: 10px">
//           <div class="tip right">${text}</div>
//         </div>
//       </div>`;
//   }
//   console.log(html);
//   content.value += html;
// }
//
// // 初始化WebSocket
// onMounted(() => {
//   initializeWebSocket();
// });
// // const userInfo = JSON.parse(userId);
// // 初始化WebSocket连接
// function initializeWebSocket() {
//   // 尝试从 localStorage 中获取用户信息并设置到 user 变量中
//   const storedUser =userId
//   if (storedUser) {
//     user.value = JSON.parse(storedUser);
//   }
//   console.log(user.value);
//   const username = user.value.userName;
//
//   if (typeof WebSocket === 'undefined') {
//     console.log('您的浏览器不支持WebSocket');
//   } else {
//     console.log('您的浏览器支持WebSocket');
//     const socketUrl = `ws://localhost:9211/imserver/${username}`;
// debugger
//     // 关闭旧的WebSocket连接
//     if (socket) {
//       socket.close();
//       socket = null;
//     }
//
//     // 开启新的WebSocket连接
//     socket = new WebSocket(socketUrl);
//
//     // WebSocket事件处理
//     socket.onopen = () => {
//       console.log('WebSocket已打开');
//     };
//
//     socket.onmessage = (msg) => {
//       console.log('收到数据====' + msg.data);
//       const data1 = JSON.parse(msg.data);
//
//       if (data1.users) {
//         console.log(data1.users);
//         users.value = data1.users.filter(u => u.username !== username);
//       } else {
//         if (data1.from === chatUser.value) {
//           messages.value.push(data1);
//           createContent(data1.from, null, data1.text);
//         }
//       }
//     };
//
//     socket.onclose = () => {
//       console.log('WebSocket已关闭');
//     };
//
//     socket.onerror = () => {
//       console.log('WebSocket发生了错误');
//     };
//   }
// }
// initializeWebSocket()




import {listDrug, preAndDiagnostic} from "@/api/doctor/patients.js";
const { proxy } = getCurrentInstance();



// 聊天框1.0
// import { ref, onMounted, onBeforeUnmount } from 'vue'
// import websocket from "@/utils/WebSocket.js";
// import {getUserService, sendMessageToService} from "@/api/WebSocket.js";
//
//
// // 收到的消息
// const receivedMessage = ref('')
// // 输入框中的消息
// const inputMessage = ref('')
// // 输入框中的用户ID
// const inputUserId = ref('')
// // 在线用户
// const userList = ref([])
// const getMessageCallback = (message) => {
//   receivedMessage.value = message
// }
//
// // 在组件挂载时设置消息处理回调
// onMounted(() => {
//   websocket.setMessageCallback(getMessageCallback)
// })
//
// // 在组件销毁前取消消息处理回调
// onBeforeUnmount(() => {
//   websocket.setMessageCallback(null)
// })
//
// // 获取在线用户
// const getUserList = async () => {
//   const res = await getUserService()
//   userList.value = res.data
// }
//
// // 发送消息
// const sendMessage = async () => {
//   const userName = inputUserId.value
//   const message = inputMessage.value
//
//   // 调用发送消息的接口
//   await sendMessageToService({ message, userName })
// }




const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const id = ref(route.query.id);
const drugList = ref([]);
const addedDrugs=ref([]);
const prescription=ref("")
const showList = ref(false);  // 控制列表显示与隐藏的变量
const drugs = ref([]); // 已选药品名称列表


//聊天框2.0
// import { ref } from 'vue';
// const url = ref("ws://127.0.0.1:9212/websocket/message");
// const message = ref("");
// const text_content = ref("");
// let ws = null;
//
// const join = () => {
//   const wsuri = url.value;
//   ws = new WebSocket(wsuri);
//   ws.onopen = function(event) {
//     text_content.value += "已经打开连接!\n";
//   };
//   ws.onmessage = function(event) {
//     text_content.value = event.data + "\n";
//   };
//   ws.onclose = function(event) {
//     text_content.value += "已经关闭连接!\n";
//   };
// };
//
// const exit = () => {
//   if (ws) {
//     ws.close();
//     ws = null;
//   }
// };
//
// const send = () => {
//   if (ws) {
//     ws.send(message.value);
//   } else {
//     alert("未连接到服务器");
//   }
// };






const data = reactive({

  queryParams: {
    drugName:null
  },
  rules: {
  },
  slips:{
    id:null,
    jsonString:null
  },
  PreAndDiagnostic:{
    drugs:[],
    id:null,
    prescription:null,
  }
});

const { queryParams, rules} = toRefs(data);
//搜索按钮
function handleQuery() {
  // 查询完成后显示列表
  showList.value = true;
  getList();

  console.log(showList.value)
}
//添加按钮
function handleAdd(row) {
  // if (!addedDrugs.value.includes(row.drugName)) {
  //   addedDrugs.value.push(row.drugName);
  //   prescription.value += row.drugName + '\n'; // 添加药品名称到文本域并换行
  // }
  const existingDrug = drugs.value.find(drug => drug.drugName === row.drugName);
  if (!existingDrug) {
    // drugs.value.push(row.drugName)
    drugs.value.push({
      drugId:row.drugId,
      drugName: row.drugName,
      drugsNumber: row.drugsNumber || 0,  // 如果 row.drugsNumber 未定义，则默认为 0})
    })
    console.log(drugs.value)
  }
}
function handleCountChange(row){
  // 处理数量变化
  console.log("数量变化", row.drugsNumber);
}
//生成诊断报告
function produce(){
  // console.log(prescription.value)
  // // 按换行符分割文本域的值
  // const lines = prescription.value.split('\n');
  // // 创建一个空数组，用于存储药品信息的对象
  // const prescriptions = [];
  // // 遍历每行文本，解析药品名称和数量
  // lines.forEach(line => {
  //   // 假设药品名称和数量之间用空格分隔
  //   const parts = line.trim().split(' ');
  //   if (parts.length === 2) {
  //     const name = parts[0];
  //     const quantity = parseInt(parts[1]); // 假设数量是整数，需要转换为数字
  //     prescriptions.push({ name, quantity });
  //   }
  // });
  // // prescriptions 现在是一个包含药品对象的数组
  // const jsonData = JSON.stringify({ prescription: prescriptions });
  // console.log(jsonData); // 输出 JSON 格式的数据

  // drugs.value.Result=prescription.value
  // console.log(drugs.value)
  data.PreAndDiagnostic.drugs=drugs.value
  data.PreAndDiagnostic.id=id.value
  data.PreAndDiagnostic.prescription=prescription.value
  console.log(data.PreAndDiagnostic)
  preAndDiagnostic(data.PreAndDiagnostic).then(res=>{

  })
}

function getList() {
  loading.value = true;
  let drugName = data.queryParams.drugName
  listDrug({drugName:drugName}).then(response => {
    drugList.value = response.data;
    loading.value = false;
  });
}


</script>
<style scoped>
.custom-div {
  margin: 0 auto; /* 水平居中 */
  width: 80%; /* 设置宽度，根据需要调整 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 从顶部开始排列 */
  padding: 20px; /* 设置内边距 */
  border: 1px solid #ccc; /* 设置边框 */
  background: lightskyblue;
}
.custom-div input[type="text"] {
  margin-top: auto; /* 将文本框推到最下方 */
  width: 70%; /* 调整输入框宽度 */
}
.custom-div button {
  margin-top: auto; /* 将文本框推到最下方 */
  font-size: 14px; /* 调整字体大小 */

}
.custom-div textarea {
  resize: none; /* 禁止用户调整文本域大小 */
  width: 30%; /* 调整文本域宽度 */
  height: 30%; /* 设置文本域高度，占据容器的80%高度 */
  padding: 10px; /* 添加内边距 */
  font-size: 14px; /* 调整字体大小 */
  margin: 20px auto; /* 上下边距为 20px，左右自动居中 */
}
.tip {
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
  padding: 10px;
  width:auto;
  display:inline-block !important;
  display:inline;
}
.right {
  background-color: deepskyblue;
}
.left {
  background-color: forestgreen;
}
</style>